require('./Monitorlist.styl');
const classNames = require('classnames');
const { Icon, Group, Boxs, List, Scroller } = SaltUI;
const { HBox, Box } = Boxs;
const WordIcon = require('images/svg/file/word.svg');
const PdfIcon = require('images/svg/file/pdf.svg');
const XlsxIcon = require('images/svg/file/xlsx.svg');
const ImgIcon = require('images/svg/file/img.svg');
const Fileicon = require('images/svg/file/file_icon.svg');
const handleClick = (index, cb) => { cb(index) };
const components = {
    word: WordIcon,
    pdf: PdfIcon,
    xlsx: XlsxIcon,
    img:ImgIcon
}
const SpeicialIcon = (props) => {
    const Specific = components[props.type];
    return <Specific className='svg-icon' />
}

const setHeight = () => {
    if (navigator.userAgent.indexOf('iPhone') != -1) {
        if (window.screen.height == '568') {
            var scrollHeight = "scrollHeight0"//4inch
        } else if (window.screen.height == '667') {
            var scrollHeight = "scrollHeight1"//4.7inch
        } else if (window.screen.height == '736') {
            var scrollHeight = "scrollHeight2"//5.5inch
        }
    } else if (navigator.userAgent.indexOf('Android') != -1) {
        //1080x1920 360x640屏宽x屏高每个分辨率都是这高度
        //   alert(document.body.offsetHeight)
        //    if (window.screen.height == '640') {
        //         var scrollHeight = "scrollHeight3"
        //     }
        var scrollHeight = "scrollHeight3"
    }
    return scrollHeight;
}
const Monitorlist = (props) => {
    
    return (
        <div className={classNames('monitorlist', { 't-hide': props.isHide })}>
            <Scroller className={props.listdata ? setHeight() : ''} autoRefresh={true}>
                {props.listdata instanceof Array &&props.listdata.length > 0?props.listdata.map((item, index) => {
                    return (
                        <HBox vAlign='center' className='box-item t-PL18 ' onClick={() => { handleClick(index, props.callback) }}>
                            <Box >{item.folder ? <Fileicon className="svg-icon place" /> : <SpeicialIcon type={item.fileName.includes("pdf") ? "pdf" : (item.fileName.includes("docx") || item.fileName.includes("doc") ? "word" : (item.fileName.includes("xlsx") ? "xlsx" : "img"))} />}</Box>                         
                            <Box className='t-FAL t-ML16 content' >
                            <span>{item.fileName}</span>
                            <p>{item.date}{item.file_version&&<span className="t-ML20">版本号:{item.file_version=='undefined'?'无':item.file_version}</span>}</p>
                            </Box>
                        </HBox>
                    );
                }):<div className="t-FAC t-SMT100">暂无文件数据</div>}
            </Scroller>
        </div>
    );
}


module.exports = Monitorlist;
